.mega-component.stepper {
    position: relative;
    width: 100%;
}

.mega-component.stepper .step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.mega-component.stepper .step .step-content {
    display: flex;
    align-items: center;
    padding: 4px;
    padding-bottom: 32px;
    position: relative;
}

.mega-component.stepper .step .secondary-step-content {
    padding: 0 4px 32px;
}

.mega-component.stepper .step .step-content > * {
    color: var(--mobile-text-disabled);
}

.mega-component.stepper .step .step-title {
    font: var(--mobile-font-caption-large-bold);
    line-height: 16px;
    margin-inline-start: 16px;
}

.mega-component.stepper .step .secondary-step-title {
    font: var(--mobile-font-caption-small-semibold);
}

.mega-component.stepper .step .step-number {
    font: var(--mobile-font-caption-small-bold);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.mega-component.stepper .step .step-icon {
    --icon-size: 24px;
    position: relative;
}

.mega-component.stepper .primary-step > .step-content::before,
.mega-component.stepper .secondary-step .step-content::before {
    content: '';
    position: absolute;
    left: 15px;
    bottom: 0;
    width: 3px;
    height: 28px;
    background-color: var(--mobile-text-disabled);
    border-radius: var(--mobile-border-radius-extra-small);
}

.rtl .mega-component.stepper .primary-step > .step-content::before,
.rtl .mega-component.stepper .secondary-step .step-content::before {
    left: auto;
    right: 15px;
}
.mega-component.stepper .primary-step:last-child > .step-content::before {
    visibility: hidden;
}

.mega-component.stepper .secondary-step .step-content::before {
    top: 24px;
}

.mega-component.stepper .step.active > .step-content .step-icon,
.mega-component.stepper .step.completed > .step-content .step-icon {
    color: var(--mobile-button-brand);
}

.mega-component.stepper .step.sub-active > .step-content .step-number {
    color: var(--mobile-text-inverse-accent);
}

.mega-component.stepper .step.completed > .step-content .step-title,
.mega-component.stepper .step.active > .step-content .step-title {
    color: var(--mobile-text-primary);
}

.mega-component.stepper .step.completed .step-number {
    display: none;
}

.mega-component.stepper .primary-step.completed:not(:last-child) .step-content::before,
.mega-component.stepper .secondary-step.completed .secondary-step-content::before,
.mega-component.stepper .primary-step.active:not(:last-child) > .step-content::before {
    background-color: var(--mobile-button-brand);
}

.dark-direct-tooltip.simpletip-tooltip.small-stepper-tip {
    display: none;
}
.dark-direct-tooltip.simpletip-tooltip.small-stepper-tip,
.dark-direct-tooltip.simpletip-tooltip.small-stepper-tip .tooltip-arrow {
    display: none;
}
@media only screen and (max-width: 1079px) {
    .mega-component.stepper .primary-step .step-title,
    .mega-component.stepper .primary-step .secondary-step-title  {
        display: none;
    }

    .dark-direct-tooltip.simpletip-tooltip.small-stepper-tip {
        display: block;
        background: var(--mobile-background-inverse);
        color: var(--mobile-text-inverse);
        font: var(--mobile-font-caption-large-regular);
        padding: 12px;
        line-height: 14px;
    }
}
